﻿<s:SurfaceWindow x:Class="Example.Window1"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:s="http://schemas.microsoft.com/surface/2008"
                 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
                 xmlns:rsm="http://reactivestatemaschine.codeplex.com/schemas/2013"
                 mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 d:DesignWidth="1024" d:DesignHeight="768" SizeToContent="WidthAndHeight"
                 Title="Window1" x:Name="self">

    <i:Interaction.Behaviors>
        <rsm:ReactiveStateMachineBehavior>
            <rsm:Mapping StateMachine="{Binding StateMachine, ElementName=self}" GroupName="VisibilityStates"/>
        </rsm:ReactiveStateMachineBehavior>
    </i:Interaction.Behaviors>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="VisibilityStates">
            <VisualState Name="Collapsed">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="target" Storyboard.TargetProperty="Opacity" To="0"/>
                </Storyboard>
            </VisualState>
            <VisualState Name="FadingIn">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="target" Storyboard.TargetProperty="Opacity" To="1"/>
                </Storyboard>
            </VisualState>
            <VisualState Name="Visible">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="target" Storyboard.TargetProperty="Opacity" To="1"/>
                </Storyboard>
            </VisualState>
            <VisualState Name="FadingOut">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="target" Storyboard.TargetProperty="Opacity" To="0"/>
                </Storyboard>
            </VisualState>
            <VisualStateGroup.Transitions>
                <VisualTransition From="Collapsed" To="FadingIn">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="target" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:3"/>
                    </Storyboard>                    
                </VisualTransition>
                <VisualTransition From="Visible" To="FadingOut">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="target" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:3"/>
                    </Storyboard>
                </VisualTransition>
            </VisualStateGroup.Transitions>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid>
        <i:Interaction.Triggers>
            <rsm:RoutedEventTrigger RoutedEvent="UIElement.TouchUp" SourceName="source">
                <rsm:EventToObserver Observer="{Binding TouchUpTrigger, ElementName=self}"/>
            </rsm:RoutedEventTrigger>
            <rsm:RoutedEventTrigger RoutedEvent="UIElement.TouchDown" SourceName="source">
                <rsm:EventToObserver Observer="{Binding TouchDownTrigger, ElementName=self}"/>
            </rsm:RoutedEventTrigger>
        </i:Interaction.Triggers>

        <TextBlock Text="{Binding ElementName=self, Path=StateMachine.CurrentState}" Foreground="White" FontSize="20"></TextBlock>
        
        <Rectangle Fill="Green" Width="100" Height="100" x:Name="source" Margin="284,314,618,316">
            
        </Rectangle>

        <Rectangle Fill="Red" Width="100" Height="100" x:Name="target" Margin="664,314,238,316">

        </Rectangle>


        
    </Grid>
</s:SurfaceWindow>
